import React, { memo, useState } from 'react';
import { Table, Tag } from 'antd';
import { MinusSquareOutlined, PlusSquareOutlined, ForwardFilled } from '@ant-design/icons';
import dataSource from './data1'

function TableComponents(props) {
    const [expandKeys, setExpandKeys] = useState(dataSource.map(item => item.key))
    const colors = [
        'magenta',
        'red',
        'volcano',
        'orange',
        'gold',
        'lime',
        'green',
        'cyan',
        'blue',
        'geekblue',
        'purple',
    ]
    const columns = [
        {
            title: '用户名称',
            dataIndex: 'user',
            key: 'user',
            width: '20%'
        },
        {
            title: '功能路径',
            dataIndex: 'url',
            key: 'url',
            width: '80%',
            render: (value, record) => {
                return record.url.map((item, index) => <span><Tag color={colors[handleIndex(index)]}>{item}</Tag><ForwardFilled style={{ color: '#EE82EE', marginRight: '3px', display: index + 1 === record.url.length ? 'none' : 'inline-block' }} /></span>)
            }
        },

    ]
    // 数据index, 颜色长度
    const handleIndex = (index) => {
        let length = colors.length;
        let curIndex = index + 1;
        if (curIndex <= length) return curIndex - 1;
        while(curIndex > length) {
            curIndex = curIndex - length
        }
        return curIndex - 1
    }
    return (
        <React.Fragment>
            <Table
                columns={columns}
                dataSource={dataSource}
                pagination={false}
                expandable={{
                    indentSize: 0,
                    expandedRowKeys: expandKeys,
                    expandIcon: ({ expanded, onExpand, record }) => {
                        if (!record.children) return
                        return expanded ? (
                            <MinusSquareOutlined onClick={e => onExpand(record, e)} />
                        ) : (
                            <PlusSquareOutlined onClick={e => onExpand(record, e)} />
                        )
                    },
                    onExpandedRowsChange: (expandedRows) => {
                        setExpandKeys(expandedRows)
                    }
                }}
            />
        </React.Fragment>
    );
}

export default memo(TableComponents);